<template>
    <div class="w-full h-full flex  justify-center">
        <div style="width: 1440px; flex-grow: 0; margin-top: 16px;" class="flex">
            <div class="grow bg-white overflow-auto"
                style="padding: 10px 10px 10px 10px; width: 948px; height: calc(100vh - 80px);">

                <div class="flex">
                    <el-button @click="$router.back()" plain class="shrink-0">返回</el-button>
                    <div class="grow-1 font-bold ms-4 text-ellipsis overflow-hidden me-4" style="line-height: 40px;">{{
                        title }}</div>
                    <el-button class="shrink-0 ms-auto me-0" :disabled="title === '' || isTaskComplete"
                        :loading="completeTaskLoading" @click="onCompleteTask" type="success">完成</el-button>
                </div>
                <el-tabs v-model="activeName" class="mt-4 mx-2">
                    <el-tab-pane label="简介" name="0">
                        <task-header v-if="activeName === '0'"/>
                    </el-tab-pane>
                    <el-tab-pane label="待办事项" name="1">
                        <task-todo v-if="activeName === '1'"/>
                    </el-tab-pane>
                </el-tabs>
            </div>


            <!-- <div style="width: 16px" class="shrink-0"></div>
            <div style="width: 296px; height: calc(100vh - 80px);" class="shrink-0 bg-white p-2">
                <div class="font-bold">title</div>
                <div class="mt-4">{{ title }}</div>
                <div class="mt-4 text-right">
                    <el-button :disabled="title === '' || isTaskComplete" :loading="completeTaskLoading" @click="onCompleteTask" type="success">完成</el-button>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
import SideTitle from "@/components/SideTitle/index.vue";
import TaskTodo from './children/todo.vue'
import TaskHeader from './children/header.vue'
import { del, onMounted, ref, set, nextTick } from '@vue/composition-api';
import Vditor from 'vditor';
import 'vditor/dist/index.css'
import { getTask, completeTask } from '@/api/task'
import { Message } from 'element-ui';
import router from '../../router';

export default {
    components: {
        SideTitle,
        TaskTodo,
        TaskHeader
    },

    setup() {
        const title = ref('')
        const description = ref('')
        const isTaskComplete = ref(false)
        function fetchTask() {
            console.log(router.currentRoute.query.taskId)
            getTask({
                taskId: router.currentRoute.query.taskId
            }).then(res => {
                title.value = res.data.title
                description.value = res.data.description
                isTaskComplete.value = 3 === res.data.status
            })
        }
        fetchTask()

        const completeTaskLoading = ref(false)
        function onCompleteTask() {
            completeTaskLoading.value = true
            completeTask({
                taskId: router.currentRoute.query.taskId
            }).then(() => {
                isTaskComplete.value = true
            }).finally(() => {
                completeTaskLoading.value = false
            })
        }


        const activeName = ref('0')
        return {
            title,
            description,
            completeTaskLoading,
            onCompleteTask,
            isTaskComplete,
            activeName

        }
    },
}
</script>

<style scoped>
.custom-card>>>.el-card__header {
    padding: 0 !important;
}
</style>